<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>键盘enter添加到列表</title>
    <script src="../js/vue.js"></script>
    <style>
        /* 整个页面的大小,内边距 */
        #app {
            width: 100%;
            padding: 20px;
        }

        /* 列表样式 */
        .list {
            list-style: none;
        }

        ul,
        li {
            padding: 0;
            margin: 0;
        }

        /* 输入框样式 */
        input {
            width: 200px;
            height: 30px;
            padding-left: 10px;
        }

        /* 后代选择器 */
        .list li {
            width: 300px;
            height: 40px;
            line-height: 40px;
            border-bottom: 1px solid #af5b5e;
        }

        .list li span {
            float: left;
        }
    </style>
</head>

<body>
    <!-- 输入框enter事件 -->
    <div id="app">
        <!-- 对于vue来说，
        vue文档提供了一种按键修饰符的方法:监听输入框上绑定enter键，
        @keyup.enter=“方法名”-->
        <input type="text" class="input-el" placeholder="按enter键可添加列表内容" @keydown.enter="enterFn" v-model="val" />
        <ul class="list">
            <!-- v-for循环添加数据 -->
            <li v-for="item in dataList">
                <!-- 显示 -->
                <span>{{item.title}}</span>
            </li>
        </ul>
    </div>
    <script>
        // 方法1:
        // var Date = new Date();
        var i = 8;
        console.log(i++ + ++i);
        console.log(i);
        console.log(++i + i++ + i++ + ++i);
        var vm = new Vue({
            el: '#app',
            data: {
                dataList: [],
                val: ''
            },
            methods: {
                enterFn() {
                    this.dataList.push({
                        title: this.val,
                    })
                    this.val = '';
                }
            }
        });
    </script>
</body>

</html>